<template>
  <div id="detailParams">
    <div class="params-size">
      <div v-for="(item, index) in paramsInfo.sizes" :key="index">
        <div class="size" v-for="(i, indey) in item" :key="indey">
          <span class="size-name">{{ i[0] }}</span>
          <span
            v-for="(j, indez) in i.slice(1)"
            :key="indez"
            class="size-value"
            >{{ j }}</span
          >
        </div>
      </div>
    </div>
    <div class="params-infos">
      <div class="infos" v-for="item in paramsInfo.infos" :key="item.name">
        <span class="infos-key">{{ item.key }}</span>
        <span class="infos-value">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detailParamsInfo",
  props: {
    paramsInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isTrue: false,
    };
  },
};
</script>

<style scoped>
#detailParams {
  padding-top: 20px;
  margin-bottom: 15px;
  border-top: 1px solid #ffffff;
}
.params-size {
  margin-bottom: 10px;
  border-bottom: 2px solid #e5e4e4;
}
.size {
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 30px;
}
.size span {
  height: 30px;
}
.size-name {
  flex: 2;
}
.size-value {
  flex: 1;
  text-align: center;
}
.infos {
  display: flex;
  align-items: center;
  padding: 10px 0 0 10px;
}
.infos .infos-key {
  flex: 2;
}
.infos .infos-value {
  flex: 3;
  padding-right: 5px;
  text-align: start;
  color: var(--color-high-text);
}
</style>
